<template>
	<view class="content">
		<view class="myService">
			<uni-nav-bar left-icon="back" title="物流批次" @clickLeft="gotoBack" :border="false" color="#fff" rightIcon="headphones" right-text="客服"  backgroundColor="transparent"></uni-nav-bar>
			<view class="service">
				<view class="topV">
					<view class="service-title">{{msgDict.orderInfo}}</view>
					<view class="status">{{signed | showType}}</view>
				</view>
				<view class="service-menu">
					<view class="item">
						<view class="labCode">{{msgDict.orderNumber}}</view>
						<view class="labTime">{{orderCode}}</view>
					</view>
					<view class="item">
						<view class="labCode">{{msgDict.createTime}}</view>
						<view class="labTime">
							<uni-dateformat :date="CreateTime"></uni-dateformat>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="itemG" v-for="(item,index2) in list" :key="index2">
			<view class="topView">
				<view class="Itemtime">
					<uni-dateformat :date="item.deliveryTime"></uni-dateformat>
					<!-- {{ formatDate()}} -->
				</view>
				<view class="ItemNum">
					<view class="labKey">
						{{msgDict.deliveryCode}}:
					</view>
					<view class="labVolue">
						{{item.deliveryCode}}
					</view>
					<uni-icons type="arrowright" size="25" color="#666"></uni-icons>
				</view>
				<view class="itemType">{{item.lastNodeName | showLastNodeName }}</view>
			</view>
			<view class="bottomView">
				<view class="btnCheck btnRed" @click="btnLogisticsClick(index2,item.deliveryCode)">
					{{msgDict.viewDetails}}
				</view>
			</view>
		 <view class="itemList" v-if="item.showHidden">
		 	<view class="itemGoods" v-for="(sonItem,sonIndex) in goodsList[index2]" :key="sonIndex">
		 		<view class="orderGoods">
		 			<view class="box-thumbnail">
		 				<image :src="sonItem.pic" mode="aspectFill"></image>
		 			</view>
		 			<view class="box-info">
		 				<view class="box-info__top">
		 					<view class="box-info__title">
		 						{{sonItem.goodsName}}
		 					</view>
		 					<view class="box-info__total_amount">
		 						￥{{sonItem.price}}
		 					</view>
		 				</view>
		 				<view class="box-info__bottom">
		 					<view class="box-info__status">{{msgDict.size}}  {{sonItem.size}}</view>
		 					<view class="box-info__status">x{{sonItem.goodsNum}}</view>
		 				</view>
		 			</view>
		 		</view>
		 		<view class="btnGView">
		 			<view class="btnCheck"  @click="btnExchangeClick(sonItem,index2,sonIndex)">
		 				{{msgDict.exchangeApply}}
		 			</view>
		 			<view class="btnCheck"  @click="btnReturnClick(sonItem,index2,sonIndex)">
		 				{{msgDict.returnApply}}
		 			</view>
		 			
		 		</view>
		 	</view>
		 </view>
		</view>
		<!-- <view class="keyItem" >
			
		</view> -->
	</view>
</template>

<script>
	import {deliveryBatch,deliveryBatchInfos} from '../../api/index.js'
	export default {
		data() {
			return {
				list:[],
				userId:undefined,
				goodsList:[[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[]],
				orderCode:'',
				currentIndex:'2',
				signed:'',
				CreateTime:'',
				statusName:'',
				sonIndex:-1,
				faindex:-1,
				msgDict:{}
				
			}
		},
		onLoad(options) {
			
		   this.msgDict = getApp().globalData.$t('aftersalesList');
		   this.userId = getApp().globalData.userId;
			if (options.orderCode) {
			    this.currentIndex = options.currentIndex
				this.orderCode = options.orderCode
				this.statusName = options.statusName
				this.requstDeliveryBatch({orderCode:options.orderCode,type:options.currentIndex});
			
			}
			
		},
		methods: {
			
			async requstDeliveryBatch(dict){
				
				let {result} = await deliveryBatch(dict);
			    this.list = result;
				this.list.map((v,i)=>{
					if (i == 0) {
						
				     this.signed = v.signed
					 this.CreateTime = v.orderCreateTime
					}
					v.showHidden = false;
					return v
				})

			},
			async requstOrderInfo(dict,index){
				
				let {result} = await deliveryBatchInfos(dict);
				console.log('123',result);
				if (result.length > 0) {
					
					let item = this.list[index];
					item.showHidden = true;
					this.list.splice(index,1,item);
					this.goodsList.splice(index,1,result);
				}
				
			},
			btntoDetailClick(e){
				// uni.navigateTo({
				// 	url:'../LogisticsDetail/LogisticsDetail?orderCode='+e
				// })
			},
			gotoBack(){
				uni.navigateBack({
					delta:1
				})
			},
			btnLogisticsClick(index,code){
				
				let item = this.list[index];
				// debugger
				
				
				if (item.showHidden) {
					
					item.showHidden = false;
					this.list.splice(index,1,item);
				// this.list[index].showHidden = false;
					
				}else{

					this.requstOrderInfo({deliveryCode:code,type:2},index,item);	
				}
				
				// uni.navigateTo({
				// 	url:'../LogisticsGoods/LogisticsGoods?orderCode='+e
				// })
			},
			btnReturnClick(info,Faindex,sonIndex){
				
				this.sonIndex = sonIndex;
				this.faindex = Faindex;
				uni.navigateTo({
					url:'../aftersalesReturn/aftersalesReturn?item=' + encodeURIComponent(JSON.stringify(info)) + '&orderCode='+this.orderCode+"&sonIndex="+sonIndex +'&faindex='+Faindex
				})
			},
			btnExchangeClick(info,Faindex,sonIndex){
				this.sonIndex = sonIndex;
				this.faindex = Faindex;
				uni.navigateTo({
					url:'../aftersalesExChange/aftersalesExChange?item=' + encodeURIComponent(JSON.stringify(info)) + '&orderCode='+this.orderCode+"&sonIndex="+sonIndex +'&faindex='+Faindex
				})
			},
			btnGetNewList(){
				
				let sonList = this.goodsList[this.faindex];
				sonList.splice(this.sonIndex,1);
				if (sonList.length == 0) {
				
					let item = this.list[this.faindex];
					item.showHidden = false;
					this.list.splice(this.faindex,1,item);
				}
				
			}
			
		},
		filters:{
			showType(val){
				
				if (val == '0') {
					return '待收货'
				} else{
					return '已收货'
				}
				
			},
			showLastNodeName(val){
				if (val) {
					return val
				} else{
					return '未发货'
				}
			}
		}
	}
</script>

<style lang="less">
page{
	height: 100%;
	background-color: #f2f2f2;
}
 .content{
	 // padding: 0rpx 20rpx;
 }
	 
 .myService{
 	// padding: 20rpx 0rpx 0;
    // margin-bottom: 20rpx;
	padding-top:  var(--status-bar-height);
	background: linear-gradient(180deg, #8250FD 0%, #5644E5 100%);
	height: 380rpx;
	margin-bottom: 60rpx;
	
 	.service{
 		background-color: #fff;
 		border-radius: 20rpx;
 		// padding-bottom: 10rpx;
 		margin: 64rpx 20rpx 0;
 		
 		.topV{
 			height: 88rpx;
 			display: flex;
 			justify-content: space-between;
 			align-items: center;
 			padding: 0 20rpx;
 			border-bottom: thin solid #f2f2f2;
 			.service-title{
 				
 				font-size: 28rpx;
 				font-weight: 500;
 				color: #333333;
 				// border-left: 10rpx solid #FFA500;
 				padding-left: 10rpx;
 				// height:52rpx;
 			}
 			.status{
 				
 				font-size: 26rpx;
 				font-weight: 400;
 				color: #6EB74B;
 				
 			}
 			
 		}
 		.service-menu{
 			
 			padding: 0 20rpx;
 			
 			font-size: 34rpx;
 			font-weight: 400;
 			color: #333;
 			
 		}
 		.item{
 			display: flex;
 			flex-direction: row;
 			align-items: center;
 			height: 85rpx;
 			border-top: thin solid #f2f2f2;
 			.labCode{
 				font-size: 26rpx;
 				color: #999;
				min-width: 150rpx;
 			}
			.labTime{
				font-size: 26rpx;
				color: #333;
			}
 		}
 	}
 }
  .itemG{
	 background-color: #fff;
	 border-radius: 20rpx;
	 margin:  0 20rpx 20rpx; 
	 .topView{
	 	 margin: 0 20rpx;
	 	  // margin: 20rpx;
	 	  // display: flex;
	 	  // justify-content: space-between;
	 	  
	 	  .Itemtime{
	 	  	  // text-align: center;
	 	  	  font-size: 28rpx;
	 	  	  color: #999;
	 	  		  height: 88rpx;
	 	  		  line-height: 88rpx;
	 	  	  // padding-top: 28rpx;
	 	  }
	 
	 }
  }
  .ItemNum{
	  
	  display: flex;
	  align-items: center;
	  height: 85rpx;
	  border-bottom: thin solid #f2f2f2;
	  border-top: thin solid #f2f2f2;
	  
	 
	  .labKey{
		  color: #999;
		  font-size: 26rpx;
		  width: 140rpx;
	  }
	  .labVolue{
		  flex: 1;
		  color: #333;
		  font-size: 26rpx;
		  font-weight: 400;
	  }
  }
  .itemType{
	  color: #999;
	  font-size: 26rpx;
	  margin-top: 30rpx;

  }
  
  .bottomView{
	  
	  height: 80rpx;
	  margin-top: 30rpx;
	  display: flex;
	  // justify-content: space-between;
	  // padding-top: 20rpx;
	  padding: 0rpx 20rpx;
	  flex-direction: row-reverse;
	  // border-top: thin solid #f2f2f2;
	  
	  .btnCheck {
	  
	  		width: 128upx;
	  		height: 52upx;
	  		border-radius: 26upx;
	  		border: thin solid #CECECE;
	  		font-size: 22upx;
	  		color: #333;
	  		line-height: 52rpx;
	  		text-align: center;
			font-weight: 400;
			margin-left:20rpx;
	  		// margin-right: 20upx;
	  
	  	}
			
		.btnRed{
			color: #0005C9;
			border: thin solid #2D63F9;
		}
  }
  .itemList{
  	 padding: 20rpx 20rpx 0;
  	 border-top: 1rpx solid #f2f2f2;
  	.orderGoods:last-child{
  		border-bottom: 1rpx solid #fff;
  		margin-bottom: 0upx;
  	}
  	.orderGoods {
  		display: flex;
  		flex-direction: row;
  		// margin-bottom: 40upx;
  		padding-bottom: 40rpx;
  		// border-bottom: 1rpx solid #f2f2f2;
  		
  	
  		.box-thumbnail {
  			width: 160upx;
  			height: 160upx;
  			margin-right: 20upx;
  	
  			image {
  				width: 100%;
  				height: 100%;
  				border-radius: 8px;
  				border: 1rpx solid #f2f2f2;
  			}
  		}
  	
  		.box-info {
  			display: flex;
  			flex-direction: column;
  			justify-content: space-between;
  			flex: 1;
  			
  				
  			.box-info__top{
  				
  				display: flex;
  				justify-content: space-between;
  				align-items: center;
  				color: #333333;
  				font-size: 32upx;
  				.box-info__title {
  					font-weight: 400;
  	
  				}
  				.box-info__total_amount {
  					font-weight: 500;
  					white-space: nowrap;
  					margin-left: 30rpx;
  					
  				}
  				
  				
  				    
  			}
  	
  	
  			.box-info__bottom {
  				// margin-top: 10upx;
  				display: flex;
  				justify-content: space-between;
  				align-items: center;
  				font-size: 28upx;
  				color: #888;
  			}
  		}
  	} 
  	.btnGView{
  		  
  		  height: 80rpx;
  		  display: flex;
  		  justify-content: space-between;
  		  flex-direction: row-reverse;
  		  // padding-top: 20rpx;
  		  border-bottom: thin solid #f2f2f2;
  		  margin-bottom: 20rpx;
  		  .btnCheck {
  		  
  				width: 146upx;
  				height: 54upx;
  				border-radius: 27upx;
  				border: 0.6upx solid #999999;
  				font-size: 28upx;
  				color: #333;
  				line-height: 54rpx;
  				text-align: center;
  				margin-right: 20upx;
  		  
  			}
  		  
  	}
  	 
   }
</style>
